<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        const oBox = document.getElementById("box")
        //当给绑定上鼠标移动事件的时候，事件会在很短时间内触发很多次，影响性能
        //初始化事件触发之前的时间节点
        // let lastTime = 0
        // oBox.onmousemove = function () {
        //     // 获取两次事件触发之间的时间间隔
        //     //获取当前事件触发的事件
        //     const firstTime = Date.now()
        //     console.log(firstTime-lastTime)
        //     //把事件执行完成的时间节点赋值给上一次的时间,作为下一次执行的初始时间保存
        //     lastTime = firstTime
        // }

        // 基础节流(事件的触发频率和事件函数的触发频率是不可控的,可以通过事件函数的核心代码控制事件在特定事件内的显示次数)
        // 获取事件触发之前的事件节点
        // let lastTime = 0
        // oBox.onmousemove = function () {
        //     const nowTime = Date.now()
        //     if((nowTime - lastTime) < 1000){
        //         //当两次的事件触发间隔事件不足1秒时,暂时不执行
        //         return 
        //     }
        //     //间隔事件满足条件时,打印核心代码
        //     console.log("核心代码");
        //     //把此次事件完成的时间节点作为下一次的初始时间节点 
        //     lastTime = nowTime
        // }


        //封装节流函数
        function throttle(fn,time) {
            //不是立即触发,返回的函数才是真正的事件函数,这样才能控制触发时间
            let lastTime = 0

            //return后面的是真正的事件函数
            return function (e) {
                const nowTime = Date.now()
                if((nowTime - lastTime) < time){
                    return
                }

                //修正this指向和event
                fn.call(this,e)
                lastTime = nowTime
            }
        }

        //创建需要节流的函数,函数内部的this应该指向调用它的事件源,event应该是记录本次事件相关的信息的
        function fn(e) {
            console.log("核心代码");
            console.log(e);//初始打印的是undefined
            console.log(this);//初始打印的是window
        }
        //目标是只要传入需要节流的函数及时间限制就可以事件节流功能
        oBox.onmousemove = throttle(fn,100)
        
    </script>
</body>
</html>